const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.ts" /* 入口文件 */,
  mode: "development" /* 开发模式 */,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js" /* 打包后的文件名 */,
  },
  module: {
    rules: [
      {
        test: /\.ts$/ /* 规则生效的文件 */,
        exclude: /node_modules/ /* 排除不需要编译的文件 */,
        use: [
          {
            loader: "babel-loader" /* 指定加载器 */,
            options: {
              // 设置预定环境
              presets: [
                [
                  "@babel/preset-env" /* 指定环境插件 */,
                  {
                    targets: {
                      chrome: "58",
                      ie: "11",
                    } /* 需要兼容的浏览器版本 */,
                    corejs: "3" /* 指定 core-js 版本 */,
                    useBuiltIns:
                      "usage" /* 使用 core-js 内置方法，usage 表示按需引入，减少打包体积 */,
                  },
                ],
              ],
            } /* 设置 babel */,
          } /* 配置 babel */,
          "ts-loader" /* 使用的 loader */,
        ],
      },
      {
        test: /\.less$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      browsers: "last 2 versions",
                    },
                  ],
                ],
              },
            },
          },
          "less-loader",
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin() /* 清理打包目录 */,
    new HtmlWebpackPlugin({
      // title: "TS测试",
      template: "./src/index.html", // 模板文件
    }) /* 自动生成 HTML 文件 */,
  ],
  resolve: {
    extensions: [".ts", ".js"] /* 这些文件可以作为模块使用 */,
  } /* 用来设置模块 */,

  /*
  optimization:{
        minimize: false // 关闭代码压缩，可选
    },
    devtool: "inline-source-map",
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(),
    ] */
};
